<template>
  <div class="divBox">
      <el-card>
         <div class="clearfix">
            <div class="container">
              <el-form inline size="small">
                <el-form-item label="状态：">
                  <el-select v-model="listPram.status" placeholder="状态" class="selWidth" @change="handlerGetList">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option label="显示" :value="1"></el-option>
                    <el-option label="不显示" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称：">
                  <el-input v-model="listPram.name" placeholder="请输入名称" class="selWidth" size="small" clearable>
                    <el-button icon="el-icon-search" @click="handlerGetList" size="small"/>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <el-button size="mini" type="primary" @click="handleAddAdvantage" v-hasPermi="['admin:advantage:save']" >新增优势</el-button>
          </div>
          <el-table
            ref="list"
            :data="listData"
            size="mini"
            class="table"
            highlight-current-row
            row-key="id"
            :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
          >
            <el-table-column prop="name" label="名称" min-width="150">
              <template slot-scope="scope">
                {{ scope.row.name }} | {{ scope.row.id }}
              </template>
            </el-table-column>
            <template>
              <el-table-column label="分类图标" min-width="180" align="center">
                <template slot-scope="scope">
                  <div class="demo-image__preview" >
                    <el-image
                      style="width: 36px; height: 36px"
                      :src="scope.row.extra"
                      :preview-src-list="[scope.row.extra]"
                      v-if="scope.row.extra"
                    />
                    <img style="width: 36px; height: 36px" v-else :src="defaultImg" alt="">
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="介绍说明" min-width="300">
                <template slot-scope="scope">
                  <div class="demo-image__preview" >
                    {{scope.row.desc}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="排序" prop="sort" min-width="80" align="center" />
              <el-table-column
                label="状态"
                min-width="100"
                align="center"
              >
              <!--  -->
                <template slot-scope="scope" v-if="checkPermi(['admin:advantage:update:status'])">
                  <el-switch
                    v-model="scope.row.status"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="显示"
                    inactive-text="隐藏"
                    @change="onchangeIsShow(scope.row)"
                  />
                </template>
              </el-table-column>
             
              <el-table-column label="操作" width="200" fixed="right" align="center">
                <template slot-scope="scope">
                  <el-button type="text"  size="small" @click="handleEditMenu(scope.row)"  v-hasPermi="['admin:advantage:info']">编辑</el-button>
                  <el-button type="text"  size="small" @click="handleDelMenu(scope.row)"  v-hasPermi="['admin:advantage:delete']">删除</el-button>
                </template>
              </el-table-column>
            </template>
          </el-table>
      </el-card>
      <!-- 新增、编辑 -->
      <el-dialog
      :title="dialogTitle"
      :visible.sync="aDialogVisible"
      width="50%"
      :before-close="handleClose">
          <AdvantageEdit @hideEditDialog="onHideEditDialog" />
      </el-dialog>
  </div>
</template>

<script>
import AdvantageEdit from '@/components/Advantage/edit.vue'
export default {
    components: {
        AdvantageEdit
    },
  data() {
    return {
        aDialogVisible: false,
        listPram: {
            status: -1,
            name: ''
        },
        // 列表数据
        listData: [],
        dialogTitle: '添加优势'
    }
  },
  methods: {
      // 新增优势
      handleAddAdvantage() {
          this.aDialogVisible = true
      },
        //搜索
      handlerGetList() {
        console.log(this.listPram)  
      },
      handleClose(done) {
          done();
      },
      onHideEditDialog() {
        console.log(11);
        this.aDialogVisible = false
      }
  }
}
</script>

<style lang="scss" scoped>

</style>
